
<template>
  <div class="tabs">
    <ul>
      <router-link :to="{name:'Home'}" tag="li" exact>
        <div>
          <i class="icon iconfont icon-shijianjilu"></i>
        </div>
        <div class="mt_5">事件记录</div>
      </router-link>
      <router-link :to="{name:'Watch'}" tag="li">
        <div>
          <i class="icon iconfont icon-shexiangji"></i>
        </div>
        <div class="mt_5">实时监控</div>
      </router-link>
      <router-link :to="{name:'Info'}" tag="li">
        <div>
          <i class="icon iconfont icon-anfangguanli"></i>
        </div>
        <div class="mt_5">安防管理</div>
      </router-link>
      <router-link :to="{name:'User'}" tag="li">
        <div>
          <i class="icon iconfont icon-yonghuguanli"></i>
        </div>
        <div class="mt_5">个人中心</div>
      </router-link>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
export default {};
</script>
<style lang="less" scoped>
.tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  color: #7a7a7a;
  width: 100%;
  & > ul,
  & > ul > li {
    margin: 0;
    padding: 0;
  }
  ul {
    display: table;
    width: 100%;
    & > li {
      text-align: center;
      font-size: 16px;
      display: table-cell;
      padding: 8px 12px;
      cursor: pointer;
      &.router-link-active {
        color: #47adff;
      }
      & > div {
        font-size: 14px;
        & > i {
          font-size: 24px;
        }
      }
    }
  }
  .mt_5 {
    margin-top: 5px;
  }
}
</style>
